<template>
  <div>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="账号">
          <el-input v-model="searchForm.mobile" placeholder="请输入账号" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="全部" clearable>
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button size="small" class="add-btn" icon="el-icon-plus" v-if="$hasMethod('#add')"
        @click="openAddDialog()">添加账号</el-button>
      <el-dropdown trigger="click" v-if="$hasMethod('#delete') || $hasMethod('#enable')" @command="handleCommand">
        <el-button size="small" class="add-btn svg-btn">
          <svg-icon icon-class="batch" :size="11" />批量操作
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="delete" v-if="$hasMethod('#delete')">删除</el-dropdown-item>
          <el-dropdown-item command="enable" v-if="$hasMethod('#enable')">启用</el-dropdown-item>
          <el-dropdown-item command="disable" v-if="$hasMethod('#enable')">禁用</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table ref="multipleTable" :data="tableData" border v-show="tableData.length > -1">
      <el-table-column align="center" type="selection" width="55"
        :selectable="(row, index) => { return row.rules !== '*' }">
      </el-table-column>
      <el-table-column align="center" prop="id" label="编号" width="70" />
      <el-table-column align="center" prop="mobile" label="账号" />
      <el-table-column align="center" prop="username" label="姓名/备注" />
      <el-table-column align="center" prop="title" label="角色" />
      <el-table-column align="center" label="所属平台" prop="type_name" />
      <el-table-column align="center" prop="admin_name" label="账号归属" />
      <el-table-column align="center" prop="create_time" label="创建时间" width="100" />
      <el-table-column align="center" prop="login_time" label="最后登录时间" width="100" />
      <el-table-column align="center" prop="login_ip" label="最后登录IP" />
      <el-table-column align="center" prop="status" width="80" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.rules !== '*' && $hasMethod('#enable')" class="pointer"
            @click="changeStatus(scope.row.id, scope.row.status)"
            :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? "启用" : "禁用" }}</el-tag>
          <el-tag v-else :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? "启用" :
            "禁用" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="140">
        <template slot-scope="scope">
          <el-button v-if="scope.row.rules !== '*' && $hasMethod('#edit')" type="primary" size="mini"
            @click="openAddDialog(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.rules !== '*' && $hasMethod('#delete')" type="danger" size="mini"
            @click="removeItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
    <add-dialog ref="addDialog" :edit-item="editItem" :role-list="roleList" @getList="getList"></add-dialog>
  </div>
</template>

<script>
import { userList, setUser, delUser, getGroupList } from "@/api/system";
import customPage from "@/components/customPage";
import addDialog from "./add";
export default {
  components: { customPage, addDialog },
  data() {
    return {
      searchForm: {
        mobile: "",
        status: null
      },
      total: 0,
      tableData: [],
      editItem: null,
      roleList: []
    }
  },
  methods: {
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delUser(id).then(res => {
          this.getList(true);
        });
      }).catch(() => { });
    },
    // 添加/编辑账号
    openAddDialog(val) {
      this.editItem = val || null;
      this.$refs.addDialog.dialogVisible = true;
    },
    // 批量操作
    handleCommand(command) {
      const list = this.$refs.multipleTable.selection;
      if (list.length === 0) {
        this.$message({
          message: "没有勾选项",
          type: "warning"
        });
        return;
      }
      const ids = list.map(item => item.id).join(',');
      switch (command) {
        case "delete":
          this.removeItem(ids);
          break;
        case "enable":
          this.changeStatus(ids, 0);
          break;
        case "disable":
          this.changeStatus(ids, 1);
          break;

        default:
          break;
      }
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.searchForm = {
        mobile: "",
        status: null
      };
      this.getList();
    },
    // 启用/禁用
    changeStatus(ids, status) {
      let tip = "", title = "";
      if (status == 1) {
        tip = "您确定要禁用吗？";
        title = "禁用";
      } else {
        tip = "您确定要启用吗？";
        title = "启用";
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        setUser({
          ids,
          status: status == 1 ? 0 : 1
        }).then(res => {
          this.getList(true);
        })
      }).catch(() => { });
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      if (!flag) {
        this.tableData = [];
      }
      userList({
        page,
        pageSize,
        status: this.searchForm.status === null ? -100 : this.searchForm.status,
        mobile: this.searchForm.mobile
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total;
      })
    },
    getRoleList() {
      getGroupList().then(res => {
        this.roleList = res || [];
      })
    }
  },
  mounted() {
    this.getList();
    this.getRoleList();
  }
}
</script>

<style lang="scss"></style>
